<template>
<!-- 
  胡龙伟
  仪表盘组件
  2021-8-31
 -->

  <div class="dashboard">
    <!-- 头部 -->
    <el-card class="header">
      <div>平台：{{dashboardObj.name}}</div>
      <el-row :gutter="20" class="message">
        <el-col :span="6"
          ><span class="grid-content bg-purple">ID</span>
          <div>{{dashboardObj.id}}</div></el-col
        >
        <el-col :span="6"
          ><span class="grid-content bg-purple">名称</span>
          <div>{{dashboardObj.displayName}}</div></el-col
        >
        <el-col :span="6"
          ><span class="grid-content bg-purple">创建时间</span>
          <div>{{dashboardObj.createTime}}</div></el-col
        >
        <el-col :span="6"
          ><span class="grid-content bg-purple">最后更新时间</span>
          <div>{{dashboardObj.lastUpdateTime}}</div></el-col
        >
      </el-row>
    </el-card>
    <!-- 内容区 -->
    <div class="allContext">
        <el-card class="context">
          <el-tabs v-model="activeName" :stretch="true" @tab-click="handleClick" class="fenlei">
           <el-tab-pane v-for="(item,index) in typeInfo" :key="index" :label="item.type" :name="item.name">
             <template>
              <el-row v-for="item in merchantList" :key="item.id" class="showCart">
                <el-divider></el-divider>
                <div class="noneShow">
                  <div v-for="c1 in item.actionList" :key="c1.actionId">{{c1.actionName}}</div>
                </div>
                <el-col :span="4"><div :style="randomRgb()" class="shopID">{{item.displayName}}</div></el-col>
                <el-col :span="5"><div>
                  <div class="typeSmall">ID</div>
                  <div>{{item.id}}</div>
                  <div v-if="item.requestType">
                    <div class="typeSmall">请求类型</div>
                    <el-tag size='mini'>{{item.requestType.displayName}}</el-tag>
                  </div>
                  <div v-else>
                    <div class="typeSmall">创建时间</div>
                    <div>{{item.createTime}}</div>
                  </div>
                  </div></el-col>
                <el-col :span="5"><div>
                  <div v-show="item.name"  class="typeSmall">名称</div>
                  <div v-show="item.name">{{item.name}}</div>
                  <div  v-show="!item.name" class="typeSmall">最后更新时间</div>
                  <div>{{item.lastUpdateTime}}</div>
                  </div></el-col>
                <el-col :span="5"><div>
                  <div  class="typeSmall">{{item.owner?'所有人':'创建时间'}}</div>
                  <el-tag v-if="item.owner" size='mini'>{{item.owner.displayName}}</el-tag>
                  <div v-else>{{item.createTime}}</div>
                  </div></el-col>
                <el-col :span="5">
                  <div>
                  <div  class="typeSmall">{{item.remoteIp?'访问IP':'商户状态'}}</div>
                  <div v-if="item.remoteIp">{{item.remoteIp}}</div>
                  <el-tag v-else size='mini'>{{item.merchantStatus.displayName}}</el-tag>
                  </div>
                  </el-col>
                  <div v-if="item.merchantStatus" class="biaoqian"><div>{{item.merchantStatus.displayName}}</div></div>
              </el-row>
             
           </template>
        </el-tab-pane>
      </el-tabs>
       </el-card>
       <!-- 右侧 -->
       <div class="rightRow">
       <el-row :gutter="12">
        <el-col :span="12" v-for="item in dashboardObj.actionList" :key="item.id" >
           <el-card shadow="always" class="elCol">
             <a-icon :type="item.actionIcon" spin style="color: #FFA90D"/>
              <span>{{item.actionName}}</span>
            </el-card>
        </el-col>
      </el-row>
       </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {getPlatform} from '../../api/ceshi/index'
import { Icon } from 'ant-design-vue';
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
});
export default {
  name: "Dashboard",
  data() {
    return {
      r:Math.round(Math.random()*255),
      g:Math.round(Math.random()*255),
      b:Math.round(Math.random()*255),
      typeInfo:[
        {type:'商户',name:'first'},
               {type:'变更请求',name:'nine'}
      ],
      merchantList:[],    //要显示的数据
      dashboardObj:{},  //所有的数据
      activeName: "first"
    };
  },
  components: {
    IconFont,
  },
  computed: {
    ...mapGetters(["name"])
  },
  mounted(){
    this.userInfo()
  },
  methods: {
    randomRgb(item) {
      let R = Math.floor(Math.random() * 130);
      let G = Math.floor(Math.random() * 130);
      let B = Math.floor(Math.random() * 130);
      return {
        background: 'rgb(' + R + ',' + G + ',' + B + ')'
       };
    },
    async userInfo(){
      let p = await getPlatform()
      this.dashboardObj = p
      this.merchantList = p.merchantList
    },
    // 切换调用
    handleClick(tab, event) {
      console.log(tab.name, event);
      if(tab.name=='nine'){
        this.merchantList = this.dashboardObj.changeRequestList
      }else if (tab.name=='first') {
         this.merchantList = this.dashboardObj.merchantList
      }
      // else if (tab.name=='second') {
      //   this.merchantList = this.dashboardObj.productList
      // }else if (tab.name=='third') {
      //   this.merchantList = this.dashboardObj.userList
      // }else if (tab.name=='four') {
      //   this.merchantList = this.dashboardObj.tenderingList
      // }else if (tab.name=='five') {
      //   this.merchantList = this.dashboardObj.tenderAwardAnnouncementList
      // }else if (tab.name=='six') {
      //   this.merchantList = this.dashboardObj.contractOrderList
      // }else if (tab.name=='seave') {
      //   this.merchantList = this.dashboardObj.returnOrderList
      // }else if (tab.name=='eight') {
      //   this.merchantList = this.dashboardObj.smartScaleList
      // }
    }
  },
};
</script>

<style lang="less" scoped>

.dashboard {
  .header {
    margin-top: 10px;
    .message{
      margin-top: 20px;
      span{
        font-size: 12px;
        color: #999999;
      }
      div{
        font-size: 14px;
        margin-top: 10px;
        color:#333
      }
    }
  }
  .allContext{
    display: flex;
    margin: 20px;
    .context {
    margin:0 20px;
    width: 70%;
    .showCart{
      position: relative;
      &:hover{
        opacity: .4;
      }
      .noneShow{
        position: absolute;
        z-index: 2;
        display: flex;
        opacity: 0;
        top: 50%;
        right: 300px;
        &:hover{
          opacity: 1;
        }
        div{
          width: 100px;
          height: 60px;
          text-align: center;
          line-height: 60px;
          background-color: rgb(11, 128, 30);
          border-radius: 30px;
          margin-right: 20px;
          color: #fff;
          font-size: 18px;
          font-weight: 900;
        }
      }
      .shopID{
        color: #fff;
        font-size: 18px;
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        border-radius: 50%;
       
      }
      .typeSmall{
        font-size: 12px;
        color: #999999;
        margin-bottom: 3px;
      }
      .biaoqian{
        
        // transform: translateX(0);
        // /* 移回也需要0.4s时间过渡 */
        // transition: transform 0.4s;

        // animation: fade-in;/*动画名称*/  
        // animation-duration: 1.5s;/*动画持续时间*/  
        // -webkit-animation:fade-in 1.5s;/*针对webkit内核*/  
        top: 80px;
        left: 210px;
        position: absolute;
        padding: 1px;
        // border: 2px solid #008000;
        border-color:#FFA90D green ;
        border-style:dotted double;
        border-width:3px;
        // &:hover{
        //     /* x=-10px代表左移10px */
        //   transform: translateX(-30px);
        //     /* 0.4s完成transform移动效果*/
        //    transition: transform 0.4s;
        // }
        div{
          width: 150px;
          height: 40px;
          font-weight: 900;
          color: #008000;
          text-align: center;
          line-height: 35px;
          // width: 145px;
          // height: 45px;
          // border: 2px solid #008000;
           border-color:#FFA90D green;
           border-style:dotted double;
           border-width:3px;
        }
      }
    }
  }
  .rightRow{
    width: 300px;
    .elCol{
      margin-bottom: 10px;
      text-align: center;
      &:hover{
        color: #FFA90D;
        background-color: #194783;
      }
      i{
        font-size: 30px;
        display: block;
        margin-bottom: 20px;
      }
    }
  }
  
  }
  
}
</style>
